<!-- CustomInput.vue -->
<script setup>
import { computed } from "vue"

// 原理 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。
// defineProps(['modelValue'])
// defineEmits(['update:modelValue'])
// 以title为例
// defineProps(['title'])
// defineEmits(['update:title'])
// 另一种写法
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <div>
    <!-- 原理 -->
    <!-- <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> -->
    <!-- 以title为例 -->
    <!-- <input :value="title" @input="$emit('update:title', $event.target.value)" /> -->
    <!-- 另一种写法 -->
    <input v-model="value" />
  </div>
</template>
